<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" style="margin-top: 50px">
        <el-tree
          ref="treeRef"
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          style="
            width: 200px;
            border: 0px solid #ccc;
            height: 800px;
            float: left;
          "
          default-expand-all
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
        />
      </el-aside>

      <el-main>
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="物料编码">
            <el-input
              v-model="form.itemBianma"
              placeholder="请选择物料编码"
              clearable
            />
          </el-form-item>

          <el-form-item label="物料名称">
            <el-input
              v-model="form.itemName"
              placeholder="请选择物料名称"
              clearable
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleNodeClick">查询</el-button>
          </el-form-item>
        </el-form>

        <el-button type="primary" size="mini" @click=""
          ><el-icon><Grid /> </el-icon>&emsp;查询所有</el-button
        >

        <el-button
          style="
            background-color: #7acefe;
            border-color: #0ea3f7;
            color: #0ea3f7;
          "
          size="mini"
          @click="dialogFormVisible = true"
        >
          <el-icon style="color: #0ea3f7; border: 1px"><Plus /></el-icon
          >&emsp;新增
        </el-button>

        <el-button
          style="
            background-color: #f9ea83;
            border-color: #e2c50c;
            color: #e2c50c;
          "
          type="warning"
          size="mini"
          @click=""
          ><el-icon><Download /></el-icon>导出
        </el-button>

        <el-button type="success" size="mini" @click=""
          ><el-icon><Monitor /></el-icon>打印
        </el-button>

        <el-button type="danger" size="mini" @click=""
          ><el-icon><Remove /></el-icon>清空
        </el-button>

        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="itemBianma" label="物料编码" width="180" />
          <el-table-column prop="itemName" label="物料名称" width="180" />
          <el-table-column
            prop="modelspecification"
            label="型号规格"
            width="180"
          />
          <el-table-column prop="measureName" label="主计量" width="180" />
          <el-table-column prop="supplyName" label="供应方式" width="180" />
          <el-table-column prop="drawingnumber" label="图纸号" width="180" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click=""> 编辑 </el-button>
              <el-button size="small" type="danger" @click="">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>

  <!-- 物料基本档弹出层 -->
  <div>
    <el-dialog v-model="dialogFormVisible" title="物料基本档添加" width="500">
      <el-form :model="forms">

        <div class="m-4">
            <el-form-item label="选择分类" :label-width="formLabelWidth">
            <el-cascader :options="options" :props="props1"
            v-model="forms.materialTypeId" @change="Handkechange"  clearable />
        </el-form-item>
        </div>

        <el-form-item label="物料编码" :label-width="formLabelWidth">
          <el-input v-model="forms.itemBianma" autocomplete="off" />
        </el-form-item>

        <el-form-item label="主计量" :label-width="formLabelWidth">
          <el-select v-model="forms.measureId" placeholder="请选择">
            <el-option
              v-for="item in measureList"
              :label="item.measureName"
              :value="item.measureId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="物料名称" :label-width="formLabelWidth">
          <el-input v-model="forms.itemName" autocomplete="off" />
        </el-form-item>

        <el-form-item label="供应方式" :label-width="formLabelWidth">
          <el-select v-model="forms.supplyId" placeholder="请选择">
            <el-option
              v-for="item in supplyList"
              :label="item.supplyName"
              :value="item.supplyId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="型号规格" :label-width="formLabelWidth">
          <el-input v-model="forms.modelspecification" autocomplete="off" />
        </el-form-item>

        <el-form-item label="图纸号" :label-width="formLabelWidth">
          <el-input v-model="forms.drawingnumber" autocomplete="off" />
        </el-form-item>

        <el-form-item label="规格描述" :label-width="formLabelWidth">
          <el-input v-model="forms.description" autocomplete="off" />
        </el-form-item>


      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="AddMateril">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import Cookie from "cookies-ts";
import axios from "axios";
const router = useRouter();
const apiurls = import.meta.env.VITE_APP_API_URL_BasicInformationCommon;//5176
const bpiurls = import.meta.env.VITE_APP_API_URL_BasicInformationWrite;//5013
// const cpiurls = import.meta.env.VITE_APP_API_URL_RBACCommon;//5214
// const dpiurls = import.meta.env.VITE_APP_API_URL_RBACWrite;//5268
// const epiurls = import.meta.env.VITE_APP_API_URL_SalesManagementCommon;//5227
// const fpiurls = import.meta.env.VITE_APP_API_URL_SalesManagementWrite;//5020


const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.label.includes(value);
};

//树形级联
const defaultProps = {
  children: "children",
  label: "label"
};
//树形数据
var data = ref([]);
function GetBang() {
  axios({
    url: apiurls+"/api/Materials/GetmaterialTree",
    method: "get"
  }).then((res) => {
    data.value = res.data.data;
    console.log(res.data.data, 111111);
  });
}

//查询
const form = reactive({
  itemBianma: "",
  itemName: ""
});

//取树形值
const tableData = ref([]);
let cc = 0;
const handleNodeClick = (data: any) => {
  console.log(data, 2222);
  uptform.materialTypeName = data.label;
  cc = data.value;
  console.log(uptform.pId);
  GetData()

 
};
const GetData =()=>{
  axios({
    url: apiurls+"/api/Materials/MaterialesSearch",
    method: "get",
    params: {
      materialTypeId: cc,
      ItemBianma: form.itemBianma,
      ItemName: form.itemName
    }
  }).then((res) => {
    tableData.value = res.data.data2;
    console.log(res.data.data2, 3333);
  });
}

const uptform = reactive({
  materialTypeName: "",
  pId: 0
});

//计量单位
const measureList:any=ref([])
function GetJil()
{
    axios({
        url:apiurls+'/api/Materials/Getmeasureunits',
        method:'get'
    })
    .then((res)=>{
        measureList.value = res.data.data
        console.log(res.data.data,123123123)
    })
}
 //绑定供应方式
 const supplyList:any=ref([])
 function GetGongy()
 {
    axios({
        url:apiurls+'/api/Materials/Getsupplymanners',
        method:'get'
    })
    .then((res)=>{
        supplyList.value = res.data.data
        console.log(res.data.data,123123123)
    })
 }

 //绑定级联
 const props1 = {
  checkStrictly: true,
}
 const Handkechange = (value:any) => {
     forms.materialTypeId = value[1]
     console.log(value, 8888)
 }
 const options:any=ref([])
 const Getoptions = () => {
     axios({
       url:apiurls+'/api/Materials/GetmaterialTree',
       method:'get'  
     }).then((res)=>{
       options.value = res.data.data
       console.log(res.data.data,777777777)
     })
 }


//弹出层添加
const forms= reactive({
    materialTypeId:'',
    itemBianma:'',//物料编码
    measureId:'',//主计量
    itemName:'',//物料名称
    supplyId:'',//供应方式
    modelspecification:'',//型号规格
    drawingnumber:'',//图纸号
    description:''//规格描述
})

const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
function AddMateril()
{
  if(forms.materialTypeId=="")
{
  ElMessage.error("请选择分类")
  return
}
  if(forms.itemBianma=="")
{
  ElMessage.error("物料编码不能为空")
  return
}
if(forms.measureId=="")
{
  ElMessage.error("主计量不能为空")
  return
}
if(forms.itemName=="")
{
  ElMessage.error("物料名称不能为空")
  return
}
if(forms.supplyId=="")
{
  ElMessage.error("供应方式不能为空")
  return
}
if(forms.modelspecification=="")
{
  ElMessage.error("型号规格不能为空")
  return
}
if(forms.drawingnumber=="")
{
  ElMessage.error("图纸号不能为空")
  return
}
if(forms.description=="")
{
  ElMessage.error("规格描述不能为空")
  return
}

    axios({
        url:bpiurls+'/api/Materwrite/AddMaterialInform',
        method:'post',
        data:forms
    }).then((res)=>{
        if(res.data.code==0)
        {
            ElMessage.success("添加成功")
            dialogFormVisible.value = false
            GetData()
        }
        else
        {
            ElMessage.error("添加失败")
        }
    })
}




//就绪函数
onMounted(() => {
  //绑定树形
  GetBang();
   //绑定计量单位
   GetJil()
    //绑定供应方式
    GetGongy()
    //绑定级联
    Getoptions()
});
</script>
